<template>
    <div class="app-container ui-page-login">
        <header class="mui-bar mui-bar-transparent">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        </header>
        <div class="login-content">
            <form id="login-form">
                <div class="ipttxt-row">
                    <input v-model="account" type="text" class="mui-input" placeholder="请输入账号"/>
                </div>
                <div class="ipttxt-row">
                    <input v-model='password' type="password" class="mui-input" placeholder="请输入密码"/>
                </div>
                <div class="ipttxt-row" style="display:flex;justify-content: space-between">
                    <div><input style="flex:7;height: 50px" v-model='jiaoyan' type="text" class="mui-input" placeholder="请输入验证码"/></div>
                    <div style="flex: 3; height: 20px;" @click="getYanzheng()" v-html="yanzhengma"></div>
                </div>
                <div class="link-area">
                    <router-link to="/register">没有账号?</router-link>
                </div>
            </form>
            <div class="">
                <button type="button" v-on:click="postLogin" class="mui-btn mui-btn-block mui-btn-login">登 录</button>
            </div>
        </div>
        <div class="mui-content-padded oauth-area"></div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import { MessageBox } from 'mint-ui'

    export default {
        data(){
            return{
                account:'',
                password: '',
                yanzhengma:'',
                jiaoyan:''
            }
        },
        created(){
            this.getYanzheng();
        },
        methods:{
            getYanzheng(){
                this.$http.get('yanzhengma').then(result => {
                    this.yanzhengma = result.body;
                })
            },
            postLogin(){
                this.$http.post('', {
                    account:this.account,
                    password:this.password,
                    jiaoyan:this.jiaoyan
                } ).then(result => {
                    // console.log(result)
                    var err_code = result.body.err_code;
                    if(err_code === 0){
                        sessionStorage.setItem('token',result.body.userid);
                        Toast({
                            message: '登录成功',
                            iconClass: 'fa fa-check fa-4x'
                        });
                        setTimeout(function () {
                            window.location.href = 'http://127.0.0.1:5000/#/home'
                            // window.location.href = 'http://charlotte912.gitee.io/vue_0004/#/home';
                        }, 1000);
                        console.log('登录成功')
                    }else if(err_code === 1){
                        console.log('用户名或密码错误');
                        Toast({
                            message: '用户名或密码错误',
                            iconClass: 'fa fa-times fa-4x'
                        });
                    }else if(err_code === 2){
                        Toast({
                            message: '验证码输入错误',
                            iconClass: 'fa fa-times fa-4x'
                        });
                    } else if(err_code === 500){
                        console.log('服务器忙 爬!')
                    }
                })
            }
        },

    }
</script>

<style lang="scss" scoped>
    .oauth-area {
        position: absolute;
        bottom: 20px;
        left: 0px;
        text-align: center;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .oauth-area .oauth-btn {
        display: inline-block;
        width: 40px;
        height: 50px;
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0px 20px;
        /*-webkit-filter: grayscale(100%); */
        border: solid 1px #ddd;
        border-radius: 25px;
    }

    .oauth-area .oauth-btn:active {
        border: solid 1px #aaa;
    }

    .oauth-area .oauth-btn.disabled {
        background-color: #ddd;
    }

    .ui-page-login,  body {
        width: 100%;
        height: 1000px;
        margin: 0;
        padding: 0;
    }
    .ui-page-login{
        background-image: url("http://127.0.0.1:3000/public/img/login-bg.jpg");
        background-size: 100% 100%;
    }
    .login-content{
        position: absolute;
        top: 28%;
        width: 90%;
        left: 50%;
        margin-left: -45%;
        border-radius: 10px;
        padding: 0 25px;
        background-color: rgba(255,255,255,0.5);
    }

    .ipttxt-row{
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
    }
    .ipttxt-row label{
        width: 20%;
    }
    .ipttxt-row .mui-input{
        width: 100%;
        border: 1px solid #fb4746;
        border-radius: 30px;
        margin-bottom: 0;
        background-color: transparent;
    }
    .ipttxt-row .mui-input::placeholder{ font-size: 14px;}
    .link-area{
        margin-top: 12px;
        margin-bottom: 15px;
        text-align: right;
    }
    .link-area a{
        color: #fb4746;
        font-size: 14px;
    }
    .mui-btn-login{
        padding: 10px 0;
        background-color: #fb4746;
        border: 1px solid #fb4746;
        border-radius: 30px;
        color: #fff;
    }
</style>
